<template>
  <div>
    <a-modal :title="title" :visible="visible" @before-open="open" @before-ok="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="400px" :mask-closable="false">
      <div>
        <a-form auto-label-width ref="formRef" size="medium" :model="form">
          <a-space direction="vertical" :size="24">
            <a-row>
              <a-col :span="24">
                <a-form-item field="pickerId" label="选择拣货员" :rules="rules.pickerId">
                  <a-select @change="selectUser" v-model="form.pickerId" allow-clear placeholder="请选择" allow-search :fallback-option="() => ''">
                    <a-option v-for="item of userList" :value="item.id" :label="item.userName"></a-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-space>
        </a-form>
      </div>

      <template #footer>
        <a-button class="gray-outline" @click="handleCancel">取消</a-button>
        <a-button type="primary" :loading="loading" @click="handleOk">确定</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { getOrganizesUser } from '@/api/system'
  import { submitPicking, updatePickers } from '@/api/order'
  import { Message } from '@arco-design/web-vue'
  export default defineComponent({
    props: ['ids', 'title'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const formRef = ref()
      const data: any = reactive({
        form: {},
        rules: {
          pickerId: [{ required: true, message: '请选择拣货员' }],
        },
        loading: false,
        userList: [],
      })

      const open = () => {
        getUSerList()
      }
      const handleOk = (done: any) => {
        formRef.value.validate(async (valid: any) => {
          if (!valid) {
            let res: any = {}
            let params: any = data.form
            params.packageIdList = props.ids
            if (props.title == '提交拣货') {
              res = await submitPicking(params)
            } else {
              res = await updatePickers(params)
            }

            if (res.code == 'SUCCESS') {
              data.form = {}
              props.title == '提交拣货' ? Message.success('提交拣货成功') : Message.success('修改拣货员成功')
              visible.value = false
              emit('save')
            }
          }
        })
      }

      // 获取用户列表
      const getUSerList = async () => {
        let params = {
          depart: false,
          pageNum: 1,
          pageSize: 1000,
        }
        const res: any = await getOrganizesUser(params)
        if (res.code == 'SUCCESS') {
          data.userList = res.data?.records
        }
      }

      const selectUser = (id: string) => {
        let obj = data.userList.find((e: any) => e.id == id)
        data.form.pickerName = obj.userName
      }

      const handleCancel = () => {
        data.form = {}
        visible.value = false
      }
      return {
        ...(toRefs(data) as any),
        visible,
        formRef,
        open,
        handleOk,
        handleCancel,
        selectUser,
      }
    },
  })
</script>

<style lang="less" scoped></style>
